import React, { Component } from 'react'
/**
 * 用来指定商品详情的富文本编辑器
 */
 import { EditorState, convertToRaw, ContentState } from 'draft-js';
 import { Editor } from 'react-draft-wysiwyg';
 import draftToHtml from 'draftjs-to-html';
 import htmlToDraft from 'html-to-draftjs';
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
 import PropTypes from 'prop-types'
 
 
 export default class RichTextEditor extends Component {

  props: any

  static propTypes = {
    detail: PropTypes.string
  }

   state = {
     editorState: EditorState.createEmpty(),
   }

   constructor(props) {
    super(props);
    const html = this.props.detail
    if (html) {
      const contentBlock = htmlToDraft(html);
      const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
      const editorState = EditorState.createWithContent(contentState);
      this.state = {
        editorState,
      };
    } else {
      this.state = {
        editorState: EditorState.createEmpty(),
      }
    }
  }


   /**
    * 输入的过程中实时的回调
    */
 
   onEditorStateChange = (editorState) => {
     this.setState({
       editorState,
     });
   };

   /**
    * 返回当前的文本
    */
   getDetail = () => {
     return draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()))
   }
 
   render() {
     const { editorState } = this.state;
     return (
         <Editor
           editorState={editorState}
           editorStyle={{ border: '1px solid #ccc', paddingLeft:  10, minHeight: 200 }}
           onEditorStateChange={this.onEditorStateChange}
         />
     );
   }
 }
